<template>
  <div id="box">
    <div id="" style="margin-bottom: 20px;">
      <el-button :type="type=='数据服务驾驶舱'?'primary':''" @click="type='数据服务驾驶舱'" v-has>数据服务驾驶舱</el-button>
      <el-button :type="type=='数据服务图谱分析'?'primary':''" @click="type='数据服务图谱分析'" v-has>数据服务图谱分析</el-button>
      <el-button :type="type=='服务访问趋势分析'?'primary':''" @click="type='服务访问趋势分析'" v-has>服务访问趋势分析</el-button>
      <el-button :type="type=='数据服务使用情况分析'?'primary':''" @click="type='数据服务使用情况分析'" v-has>数据服务使用情况分析</el-button>
    </div>
    <div style="width: 100%;height: 80%;" v-if="type=='数据服务驾驶舱'">
      <img style="width: 100%;height: 80%;" src="../../../assets/login/home.png" />
    </div>
    <div v-if="type=='服务访问趋势分析'">
      <el-table :data="tableData" border fit stripe>
        <el-table-column v-for="item in tableHead" :key="item.id" :label="item.label" :prop="item.title" align="center"
          :show-overflow-tooltip="true">
        </el-table-column>
      </el-table>
    </div>
    <div v-if="type=='数据服务使用情况分析'">
      <el-table :data="tableData1" border fit stripe>
        <el-table-column v-for="item in tableHead1" :key="item.id" :label="item.label" :prop="item.title" align="center"
          :show-overflow-tooltip="true">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        type: '数据服务驾驶舱',
        tableHead: [{
            id: 1,
            label: '日志编号',
            title: 'number'
          },
          {
            id: 2,
            label: '日子名称',
            title: 'name'
          },
          {
            id: 3,
            label: '日子级别',
            title: 'date'
          },
          {
            id: 4,
            label: '日志结果',
            title: 'result'
          },
          {
            id: 5,
            label: '发生时间',
            title: 'time'
          },
          {
            id: 6,
            label: '是否审计',
            title: 'audit'
          },
          {
            id: 7,
            label: '所属机构',
            title: 'mechanism'
          },
          {
            id: 8,
            label: '操作用户',
            title: 'userName'
          },
        ],
        tableData: [{
            number: '1',
            name: '文件发布信息保存',
            date: '一般',
            result: '成功',
            time: new Date().toDateString(),
            audit: '未审计',
            mechanism: '成都市',
            userName: 'zd',
          },
          {
            number: '2',
            name: '文件发布启用',
            date: '一般',
            result: '成功',
            time: new Date().toDateString(),
            audit: '未审计',
            mechanism: '成都市',
            userName: 'zd',
          },
          {
            number: '3',
            name: '文件上传',
            date: '一般',
            result: '成功',
            time: new Date().toDateString(),
            audit: '未审计',
            mechanism: '成都市',
            userName: 'zd',
          },
          {
            number: '4',
            name: '新增用户',
            date: '一般',
            result: '成功',
            time: new Date().toDateString(),
            audit: '未审计',
            mechanism: '成都市',
            userName: 'zd',
          },
          {
            number: '5',
            name: '删除用户',
            date: '一般',
            result: '成功',
            time: new Date().toDateString(),
            audit: '未审计',
            mechanism: '成都市',
            userName: 'zd',
          },
          {
            number: '6',
            name: '数据抽取',
            date: '一般',
            result: '成功',
            time: new Date().toDateString(),
            audit: '未审计',
            mechanism: '成都市',
            userName: 'zd',
          },
        ],
        tableData1: [{
            server: '数据抽取',
            startTime: '2021/10/25',
            longTime: '2小时',
            user: 'zd'
          },
          {
            server: '风险检测',
            startTime: '2021/10/23',
            longTime: '3小时',
            user: 'zd'
          },
          {
            server: '预警管理',
            startTime: '2021/10/21',
            longTime: '1小时',
            user: 'zd'
          },
          {
            server: '合规监管',
            startTime: '2021/10/22',
            longTime: '30分钟',
            user: 'zd'
          },
          {
            server: '数据采集',
            startTime: '2021/10/23',
            longTime: '20分钟',
            user: 'zd'
          },
        ],
        tableHead1: [{
            id: 1,
            label: '访问服务',
            title: 'server'
          },
          {
            id: 2,
            label: '时间',
            title: 'startTime'
          },
          {
            id: 3,
            label: '时长',
            title: 'longTime'
          },
          {
            id: 4,
            label: '访问者',
            title: 'user'
          },
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>
  #box {
    padding: 30px;
  }
</style>
